import {
  NLayout,
  NAvatar,
  NForm,
  NInput,
  NFormItem,
  NCheckbox,
  NButton,
  NIcon,
  NCard,
  NPopover,
  NSpace,
  NImage,
  NSlider,
} from "naive-ui";
import { Ref } from "vue";
import { useRouter } from "vue-router";
import { useTheme } from "@/hooks/useTheme";
import {
  WeatherMoon16Filled,
  WeatherSunny20Filled,
  PersonCircle12Filled,
  LockMultiple24Filled,
  ImageEdit20Filled,
} from "@vicons/fluent";
import { getAssetsImages } from "@/utils/index";
export default defineComponent({
  name: "Login",
  setup() {
    const router = useRouter();
    const loginFormRef: Ref = ref(null);
    const { globalTheme, handleToggleTheme } = useTheme();
    let isLoading = ref(false);
    let loginForm = reactive({
      userName: "",
      userPwd: "",
      isRemember: false,
    });
    let rules = {
      userName: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入用户名",
      },
      userPwd: {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入密码",
      },
    };
    const bgList: string[] = ["login-bg.jpg", "login-bg1.jpg"];
    let bgSrc = ref(getAssetsImages(bgList[0]));
    let blurNum = ref(0);
    let opacityNum = ref(0);
    const handleLogin = () => {
      loginFormRef.value
        ?.validate((errors: any) => {
          if (!errors) {
            isLoading.value = true;
            window.$message.success("登录成功", {
              duration: 2000,
            });
            router.replace({
              path: "/",
            });
          }
        })
        .catch((err: any) => {
          isLoading.value = false;
          console.log(err);
        });
    };
    const theme = computed(() => {
      if (globalTheme.value === "darkTheme") {
        return "login-body login-body-dark p-3";
      } else {
        return "login-body p-3";
      }
    });

    return () => (
      <NLayout
        class={theme.value}
        position="absolute"
        style={`background: url(${bgSrc.value}) no-repeat center center / cover #EFEFF5;`}
      >
        <div
          class="theme-bg absolute w-full h-full top-0 left-0 z-0"
          style={{
            background: `rgba(${
              globalTheme.value === "darkTheme" ? "0,0,0," : "250,250,250,"
            }${opacityNum.value})`,
            backdropFilter: `blur(${blurNum.value}px)`,
          }}
        ></div>

        <div class="flex justify-between relative z-10">
          <div class="flex items-center">
            <NAvatar
              size="small"
              style={{
                color: "#fff",
                backgroundColor: "#18A058",
              }}
            >
              OA
            </NAvatar>
            <span class=" ml-2 font-bold">协同办公平台</span>
          </div>
          <div class="flex items-center pl-10 pr-4 text-white">
            <div
              class="mr-6"
              style={{
                transform: "translateY(2px)",
              }}
            >
              <NButton
                text
                onClick={() => {
                  handleToggleTheme();
                }}
              >
                <NIcon
                  color="#fff"
                  size={24}
                  component={
                    globalTheme.value === "darkTheme"
                      ? WeatherSunny20Filled
                      : WeatherMoon16Filled
                  }
                />
              </NButton>
            </div>
            <div
              style={{
                transform: "translateY(2px)",
              }}
            >
              <NPopover trigger="click">
                {{
                  trigger: () => {
                    return (
                      <NButton text onClick={() => {}}>
                        <NIcon
                          color="#fff"
                          size={24}
                          component={ImageEdit20Filled}
                        />
                      </NButton>
                    );
                  },
                  default: () => {
                    return (
                      <>
                        <NSpace vertical>
                          <p class=" text-xs">background：</p>
                          <NSpace>
                            {bgList.map((item: string) => {
                              let src_ = getAssetsImages(item);
                              return (
                                <div
                                  onClick={() => {
                                    bgSrc.value = src_;
                                  }}
                                >
                                  <NImage
                                    class="cursor-pointer"
                                    preview-disabled
                                    key={item}
                                    width={50}
                                    src={src_}
                                  />
                                </div>
                              );
                            })}
                          </NSpace>
                        </NSpace>
                        <NSpace vertical>
                          <p class=" text-xs">blur：</p>
                          <NSlider
                            step={1}
                            max={20}
                            v-model:value={blurNum.value}
                          ></NSlider>
                          <p class=" text-xs">opacity：</p>
                          <NSlider
                            step={0.1}
                            max={0.8}
                            v-model:value={opacityNum.value}
                          ></NSlider>
                        </NSpace>
                      </>
                    );
                  },
                }}
              </NPopover>
            </div>
          </div>
        </div>
        <div class="login-form-out border-r-3 absolute w-96 h-96 right-32 top-0 bottom-0 m-auto z-10">
          <NCard style="height:100%">
            <NForm
              size="large"
              ref={loginFormRef}
              model={loginForm}
              rules={rules}
            >
              <NFormItem label="账号" path="userName">
                <NInput
                  placeholder="请输入账号"
                  size="large"
                  v-model:value={loginForm.userName}
                >
                  {{
                    prefix: () => {
                      return (
                        <NIcon size="25" component={PersonCircle12Filled} />
                      );
                    },
                  }}
                </NInput>
              </NFormItem>
              <NFormItem label="密码" path="userPwd">
                <div class="flex-1">
                  <NInput
                    placeholder="请输入密码"
                    type="password"
                    showPasswordOn="mousedown"
                    size="large"
                    v-model:value={loginForm.userPwd}
                  >
                    {{
                      prefix: () => {
                        return (
                          <NIcon size="25" component={LockMultiple24Filled} />
                        );
                      },
                    }}
                  </NInput>
                </div>
              </NFormItem>
              <NFormItem showFeedback={false} showLabel={false}>
                <div class="flex-auto flex justify-between">
                  <NCheckbox v-model:checked={loginForm.isRemember}>
                    记住密码
                  </NCheckbox>
                  <NButton text>忘记密码？</NButton>
                </div>
              </NFormItem>
              <NFormItem>
                <NButton
                  block
                  type="primary"
                  loading={isLoading.value}
                  onClick={() => {
                    handleLogin();
                  }}
                >
                  登录
                </NButton>
              </NFormItem>
            </NForm>
            <div class="flex justify-end">
              <NButton text>没有账号？去注册</NButton>
            </div>
          </NCard>
        </div>
      </NLayout>
    );
  },
});
